<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        background: black;
    }

    div {
        width: 100%;
        height: 10px;

    }

    div>p {
        height: 10px;
        width: 100%;
        background: pink;
    }

    span {
        position: absolute;
        top: 10px;
        left: 50%;
        color: #fff;
        font: 30px/30px "";
    }
</style>
<div>
    <p></p>
    <!-- <span>123</span> -->
</div>
<span id="span2">得分:0分</span>

<script>
    var sun = 100
    var setin1 = setInterval(function () {
        var span1 = document.querySelector("p")
        
        sun=sun-1
        if(sun>=0){
        span1.style.width = sun + "%"
    }
        var max1 = window.innerWidth || document.documentElement.clientWidth
        var max2 = window.innerHeight || document.documentElement.clientHeight
        var ran1 = Math.floor(Math.random() * (max1 - 0 + 1))
        var ran2 = Math.floor(Math.random() * (max2 - 0 + 1))
        var img1 = document.createElement("img")
        img1.src = "./images2/star.gif"
        img1.style.width = 100
        img1.style.position = "absolute"
        img1.style.left = ran1 + "px"
        img1.style.top = ran2 + "px"
        if (ran2 - 100 > 50) {
            document.body.appendChild(img1)
        }
        if(sun==0){
     clearInterval(setin1)
     alert("游戏结束，您的得分是"+num+"分")
 }
    }, 10)
   
   
   



    
    var num = 0
    document.addEventListener("click", function (evt) {
        var e = evt || window.event;
        var span2
        var target = e.target
        var span2 = document.querySelector("#span2")

        if (target.nodeName == "IMG") {
            target.parentNode.removeChild(target)
            num += 1
            span2.innerHTML = "得分:" + num + "分"

        }




    })

</script>